<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-课堂案例</title>
    <script>
        window.onload = function () {
            let ulEle = document.getElementById("na");
            let addBtnEle = document.getElementById("addBtn");
            let deleteBtnEle = document.getElementById("deleteBtn");
            // 添加事件
            addBtnEle.onclick = function () {
                // 获取用户输入的内容
                let inputValue = document.getElementById("input").value;
                // 创建 li 标签
                let liEle = document.createElement("li");
                // li 标签添加用户输入内容
                liEle.innerHTML = inputValue;
                // 将 li 标签添加为 ul 标签的子标签
                ulEle.appendChild(liEle);
            }
            // 删除事件
            deleteBtnEle.onclick = function () {
                // 获取用户输入的内容
                let inputValue = document.getElementById("input").value;
                // 拿到 ul 的所有子元素
                let liEle = ulEle.children;
                // 遍历 li
                for (let i = 0; i < liEle.length; i++) {
                    if (inputValue == liEle[i].innerHTML) {
                        ulEle.removeChild(liEle[i]);
                        i--;
                    }
                }
            }
        }
    </script>
</head>
<body>
<input type="text" name="nation" placeholder="请输入一个国家" id="input">
<input type="button" name="add" value="添加" id="addBtn">
<input type="button" name="delete" value="删除" id="deleteBtn">

<ul id="na">

</ul>
</body>
</html>